<template>
  <div class="account-content">
    <div class="content-box">
      <span class="title">名字：</span>
      <span>{{ accontList.name }}</span>
    </div>
    <div class="content-box">
      <span class="title">昵称：</span>
      <span>{{ accontList.nickname }}</span>
    </div>
    <div class="content-box">
      <span class="title">性别：</span>
      <span>{{ accontList.sex }}</span>
    </div>
    <div class="content-box">
      <span class="title">年龄：</span>
      <span>{{ accontList.age }}</span>
    </div>
    <div class="content-box">
      <span class="title">账号：</span>
      <span>{{ accontList.account }}</span>
    </div>
    <div class="content-box">
      <span class="title">申请时间：</span>
      <span>{{ accontList.updateDate }}</span>
    </div>
    <div class="content-box">
      <span class="title">头像：</span>
      <img class="imger" :src="accontList.headImg" alt="" />
    </div>
    <div class="content-box">
      <span class="title">描述：</span>
      <span id="describe"></span>
    </div>
  </div>
</template>

<script>
let i = 0;
let timer = 0;
export default {
  name:'AccountNumber',
  data() {
    return {
      accontList: {
        name: "admin",
        nickname: "没事别搞事",
        sex: "男",
        age: "23",
        account: "2358919402",
        updateDate: "2021-11-10",
        describe: "JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。 [1] JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2] JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。",
        headImg: require("@/assets/touxiang.jpg"),
      },
    };
  },
  created() {},
  mounted() {
    this.typingAdd();
  },
  methods: {
    typingAdd() {
      let divTyping = document.getElementById("describe");
      let str = this.accontList.describe;
      if (i <= str.length) {
        divTyping.innerHTML = str.slice(0, i++) + "_";
        timer = setTimeout(this.typingAdd, 100);
      } else {
        divTyping.innerHTML = str; //结束打字,移除 _ 光标
        clearTimeout(timer);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.account-content {
  height: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 20px;
  .content-box {
    color: salmon;
    line-height: 60px;
    display: flex;
    align-items: center;
    .title {
      display: inline-block;
      width: 6em;
    }
    .imger {
      width: 100px;
      height: 100px;
    }
    #describe {
      letter-spacing: 2px;
      flex: 1;
      text-indent: 2em;
      line-height: 2em;
    }
  }
}
</style>